<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        .moreSection{
          width: 100%;
          background: url(../../image/main/userSection@2x.png) no-repeat center;
          background-size: 100% 100%;
          margin-top: 8px;
        }

        .userPhoto{
          width: 81px;
          height: 81px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .userLevel{
          display: inline-block;
          width: 46px;
          height: 19px;
          margin: 0 0 -2px 3px;
        }
        .userInfonSection p{
           text-align:center;
        }
        .firstP{
          font-size: 19px;
          color: #000;
          margin: 6px 0 5px 0;
        }
        .lastP{
           line-height: 12px;
        }
        .stars{
          display: inline-block;
          width: 9px;
        }
        .userInstret{
          margin-top: 132px;
          background-color: transparent;
        }
        .aui-row{
              padding: 0 32%;
              overflow: inherit;
        }
        .aui-grid [class*=aui-col-]{
              padding: 0 14px 28px 0;;
              line-height: 18px;
              color: #969696;
        }
        .aui-grid-label{
          font-size: 18px!important;
        }
        .comment{
          margin-top: 95px;
        }
        .comment .firstP{
          font-size: 17px;
          color: #969696;
        }
        .comment img{
          width: 20px;
          height: 10px;
        }
        .colorgrey{
          color: #595959;
          margin-bottom: 15px;
        }
        .ItemInfo{
          transform:rotateZ(90deg) translate(40%,240%);
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .msgBtn{
            width: 16px;
            margin: 15px 0 9px 12px;
          }
          .aui-grid{
            padding: 0 30px;
          }
          .userPhoto{
            width: 54px;
            height: 54px;
          }
          .firstP{
            font-size: 13px;
            margin: 4px 0 0px 0;
          }
          .userLevel {
            width: 36px;
            height: 15px;
          }
          .lastP{
            font-size: 10px
          }
          .stars{
            width: 6px;
          }
          .aui-grid-label{
                font-size: 12px!important;
          }
          .userInstret{
            margin-top: 71px;
          }
          .aui-grid [class*=aui-col-]{
            padding: 0 14px 16px 0;
          }
          .comment .firstP{
            font-size: 13px;
          }
          .comment img{
            width: 14px;
            height: 7px;
          }
          .ItemInfo{
            transform:rotateZ(90deg) translate(30%,135%);
          }
        }
    </style>
</head>

<body>

            <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
               <div class="userInfonSection">
                     <img class="userPhoto" src="../../image/test@2x.png">
                     <p class="firstP">西安信息科技服务有限公司<img class="userLevel" src="../../image/ident@2x.png"></p>
                     <p class="lastP">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/halfStar@2x.png">
                       4.5
                     </p>
               </div>
               <section class="aui-grid userInstret">
                          <div class="aui-row">
                              <div class="aui-col-xs-4">
                                  <div class="aui-grid-label"><span class="colorgrey">{{instrstItemName1}}</span><span class="ItemInfo"> {{instrstItemInfo1}}</span></div>
                              </div>
                              <div class="aui-col-xs-4">
                                  <div class="aui-grid-label"><span class="colorgrey">{{instrstItemName2}}</span><span> {{instrstItemInfo2}}</span></div>
                              </div>
                              <div class="aui-col-xs-4" style="color:#000;">
                                  <div class="aui-grid-label">联系人信息</div>
                              </div>
                          </div>
               </section>
              </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            showMask1 : false,
            showMask2 : false,
            instrstItemName1 : '联系电话',
            instrstItemInfo1 : "13788888888",
            instrstItemName2 : '联系人',
            instrstItemInfo2 : "王建国",
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-20) + 'px';
            },
            gotoComment : function(){
              bf_common_view.bf_win.openWin('userComment', '../main/');
            }
        },

    });
    var mainPageMethod = {

    };
    app.init();
</script>

</html>
